<template>
  <H1>个人简历练习</H1>
  <table border="1px">
    <tr>
      <td>照片:</td>
      <td><img :src="person.imgUrl" width="120"></td>
    </tr>
    <tr>
      <td>姓名:</td>
      <td>{{ person.name }}</td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td>{{ person.age }}</td>
    </tr>
    <tr>
      <td>好友:</td>
      <td>
        <ul>
          <li v-for="item in person.friend">{{ item }}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="f">点击加载数据</button>
</template>

<script setup>
import {ref} from "vue";

const person = ref({
  name: '',
  age: '',
  imgUrl: [],
  friend: []
});
const f = () => {
  person.value = {
    name: '范传奇',
    age: '18',
    imgUrl: 'imgs/fcq.jpg',
    friend: ['张三', '李四', '王五']
  }
}
</script>

<style scoped>
li {
  text-align: left;
}
</style>